<template>
    <div class="mine">
        <div class="navbar">
            <van-nav-bar fixed>
                <template #left>
                    <van-icon name="envelop-o" size="18" color="#000"/>
                </template>
                <template #right>
                    <van-icon name="exchange" size="18" color="#000"/>
                </template>
            </van-nav-bar>
        </div>
        <div class="main">
            <div class="user-content">
                <van-row>
                    <van-col span="8" type="flex" align="center">
                        <van-image
                            round
                            width="1.5rem"
                            height="1.5rem"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                            />
                    </van-col>
                    <van-col span="16">
                        <p class="username">张三 <span class="userpage">主页></span></p>
                        <span class="userintr">编辑个人资料</span>
                    </van-col>
                </van-row>               
                <van-grid :column-num="2" :gutter="20" class="itemlist">
                    <van-grid-item>
                        <span class="itemicon ">
                        </span>
                        <div>
                            <span class="itemtitle">账户</span>
                            <p class="itemintr">余额 0.00</p>
                        </div>
                    </van-grid-item>
                    <van-grid-item>
                        <span class="itemicon itemicon1"></span>
                        <div>
                            <span class="itemtitle">无限卡</span>
                            <p class="itemintr">9元/月</p>
                        </div>
                    </van-grid-item>
                    <van-grid-item>
                        <span class="itemicon itemicon2"></span>
                        <div>
                            <span class="itemtitle">购物车</span>
                            <p class="itemintr">添加商品</p>
                        </div>
                    </van-grid-item>
                    <van-grid-item>
                        <span class="itemicon itemicon3"></span>
                        <div class="itemtxt">
                            <span class="itemtitle">订单</span>
                            <p class="itemintr">管理订单</p>
                        </div>
                    </van-grid-item>
                </van-grid>
            </div>
            <div class="social-content">
                <van-grid :column-num="2" :gutter="20">
                    <van-grid-item>
                        <div class="item">
                            <div class="left">
                                <span class="itemicon itemicon1"></span>
                                <span class="itemtitle">读书排行榜</span>
                            </div>
                            <div class="right">
                                <span>第1名</span>
                                <p class="itemintr">1分钟 可兑换1天无限卡</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="left">
                                <span class="itemicon itemicon2"></span>
                                <span class="itemtitle">关注</span>
                            </div>
                            <div class="right">
                                <span>0人关注我</span>
                                <p class="itemintr">70位微信朋友正在阅读</p>
                            </div>
                        </div>
                    </van-grid-item>
                </van-grid>
                <van-grid :column-num="2" :gutter="20">
                    <van-grid-item>
                        <div class="item">
                            <div class="left">
                                <span class="itemicon itemicon3"></span>
                                <span class="itemtitle">勋章</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="left">
                                <span class="itemicon itemicon4"></span>
                                <span class="itemtitle">笔记</span>
                            </div>
                            <div class="right">
                                <span class="rightintr">1个笔记</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="left">
                                <span class="itemicon itemicon5"></span>
                                <span class="itemtitle">阅读记录和订阅</span>
                            </div>
                            <div class="right">
                                <span class="rightintr">10个阅读记录</span>

                            </div>
                        </div>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
        <Downbar></Downbar>
    </div>
</template>

<script>
import Downbar from '../components/Downbar.vue'
export default {
    name:"Mine",
    props: {

    },
    data() {
        return {
            
        };
    },
    computed: {

    },
    created() {
    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {
        Downbar,
    },
};
</script>

<style scoped lang="less">
*{font-size: 16px;}
.mine{
    background: #f4f5f7;
    max-width: 7.5rem;
    .navbar{
        width: 100%;
        height: 1rem;
        .van-nav-bar{
            background: #f4f5f7;   
        }
    }
    .main{
        width: 100%;
        height: auto;
        .user-content{
        width: 100%;
        height: 5.2rem;
        box-sizing: border-box;
        /deep/.van-row{
            width: 100%;
            height: 39%;
        }
        .username{
            font-size: 20px;
            font-weight: 900;
            margin: .2rem;
            margin-left: 0;
            .userpage{
                font-size: 13px;
                color:#333;
                font-weight: normal;
                display: inline-block;
                margin-left: 3rem;
            }
        }
        .userintr{
            font-size: 14px;
            color:#888;
        }
        .van-grid-item{
            /deep/.van-grid-item__content{
                padding:8px 8px;
                border-radius: 15px;
                flex-direction: row;
                justify-content: space-evenly;
                .itemicon{
                    display: inline-block;
                    width: .4rem;
                    height: 0.4rem;
                    background: url('http://localhost:8081/imgs/mineBG.png') 0 0;
                    background-size: 1050% 100%;
                }
                .itemicon+div{
                    width: 1.6rem;
                }
                .itemicon1{
                    background: url('http://localhost:8081/imgs/mineBG.png') -19px 0;
                    background-size: 1050% 100%;
                }
                .itemicon2{
                    background: url('http://localhost:8081/imgs/mineBG.png') -39px 0;
                    background-size: 1050% 100%;
                }
                .itemicon3{
                    background: url('http://localhost:8081/imgs/mineBG.png') -58px 0;
                    background-size: 1050% 100%;
                }
                .itemtitle{
                    font-size: 14px;
                    font-weight: 600;
                }
                p{
                    font-size: 10px;
                    color:#666;
                    margin:.1rem 0;
                }  
            }
            /deep/.van-grid-item__content--surround::after {
                border:none;
            }
        }
    }

    }
    .social-content{
        width: 100%;
        height: 8.4rem;
        .van-grid{
            flex-direction: column;
            /deep/.van-grid-item__content{
                border-radius: 15px;
                margin-bottom: .4rem;
                padding: 8px 8px;
                .item{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    width: 100%;
                    height: 1.2rem;
                    .left{
                        width: 40%;
                        .itemicon{
                            display: inline-block;
                            width: .4rem;
                            height: 0.4rem;
                            background: url('http://localhost:8081/imgs/mineBG.png') 0 0;
                            background-size: 1050% 100%;
                            margin-right: .1rem;
                            position: relative;
                            top: 5px;
                        }
                        .itemtitle{
                            font-size: 14px;
                            font-weight: 600;
                        }
                        .itemicon1{
                            background: url('http://localhost:8081/imgs/mineBG.png') -78px 0;
                            background-size: 1050% 100%;
                        }
                        .itemicon2{
                            background: url('http://localhost:8081/imgs/mineBG.png') -97px 0;
                            background-size: 1050% 100%;
                        }
                        .itemicon3{
                            background: url('http://localhost:8081/imgs/mineBG.png') -117px 0;
                            background-size: 1050% 100%;
                        }
                        .itemicon4{
                            background: url('http://localhost:8081/imgs/mineBG.png') -137px 0;
                            background-size: 1050% 100%;
                        }
                        .itemicon5{
                            background: url('http://localhost:8081/imgs/mineBG.png') -157px 0;
                            background-size: 1050% 100%;
                        }
                    }
                    .right{
                        text-align: right;
                        width: 60%;
                        p{   
                            font-size: 10px;
                            color:#666;
                            margin:.1rem 0;
                        }
                        span{
                            font-size: 12px;
                            color:#000;
                        }
                        
                    }
                }
                
            }
            /deep/.van-grid-item__content--surround::after {
                border:none;
            }
        }
    }
}


</style>
